<template>
    <div>

      <el-row  :gutter="20">
          <el-col :span="4">
            <div class="example-title">基础用法</div>
          </el-col>
        <el-col :span="4">
          <div class="example-title">有禁用选项</div>
        </el-col>
        <el-col :span="4">
          <div class="example-title">禁用状态</div>
        </el-col>
        <el-col :span="6">
          <div class="example-title">可清空单选*（带清空图标）</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-select class="emp-select" v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="4">
          <el-select class="emp-select"  v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="4">
          <el-select class="emp-select"  v-model="value" disabled placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="6">
          <el-select class="emp-select" v-model="value" clearable placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row  :gutter="20">
        <el-col :span="4">
          <div class="example-title">基础多选</div>
        </el-col>
        <el-col :span="4">
          <div class="example-title"></div>
        </el-col>
        <el-col :span="4">
          <div class="example-title">将选项进行分组</div>
        </el-col>
        <el-col :span="6">

        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-select   v-model="value1" multiple placeholder="请选择">
<!--            <el-option
                v-for="item in multipleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>-->
              <el-option
                      :value="selectTreeTestingUnit"
                      disabled
                      hidden
              />
              <el-tree
                      ref="treeTestingUnit"
                      :props="defaultProps"
                      :node-key="defaultProps.value"
                      :data="data"
                      show-checkbox
                      check-strictly
                      check-on-click-node @check-change="handleNodeClickTestingUnit"
              /><!-- :load="loadNode"
                      lazy-->
          </el-select>

           <el-select v-model="testSelectVal" multiple  @change="handleTestSelectVal">
               <el-option
                       v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value" >
               </el-option>
           </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
              class="emp-select"
              v-model="value2"
              multiple
              collapse-tags
              placeholder="请选择">
            <el-option
                v-for="item in multipleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="4">
          <el-select  class="emp-select" v-model="value3" placeholder="请选择">
            <el-option-group
                v-for="group in cityOptions"
                :key="group.label"
                :label="group.label">
              <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
        </el-col>
      </el-row>

      <el-row  :gutter="20">
        <el-col :span="4">
          <div class="example-title">选择日</div>
        </el-col>
      </el-row>
      <el-row  :gutter="20">
        <el-col :span="4">
          <el-date-picker
              class="emp-datetime"
              v-model="date1"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-col>
      </el-row>

      <el-row :gutter="20">
          <div class="example-title"></div>
         <el-input-number class="epm-inputnumber" v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
      </el-row>
    </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      options: [{
        value: '1',
        label: '10:00'
      }, {
        value: '2',
        label: '10:20'
      }, {
        value: '3',
        label: '10:40',
        disabled: true
      }, {
        value: '4',
        label: '11:00'
      }, {
        value: '5',
        label: '11:20'
      }],
      value: '',
      value1:'',
        testSelectVal:'',
      value2:'',
      value3:'',
      date1:'',
      num: 1,
      multipleOptions: [{
        value: '1',
        label: '选项文案'
      }, {
        value: '2',
        label: '选项文案'
      }, {
        value: '3',
        label: '选项文案'
      }, {
        value: '4',
        label: '选项文案'
      }, {
        value: '5',
        label: '选项文案'
      }],
      cityOptions: [{
        label: '热门城市',
        options: [{
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Beijing',
          label: '北京'
        }]
      }, {
        label: '城市名',
        options: [{
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }, {
          value: 'Dalian',
          label: '大连'
        }]
      }],
      dialogVisible: false ,
      selectTreeTestingUnit: [],
      defaultProps: {
          value: 'id',
          label: 'label',
          children: 'children'
      },
        data: [{
            id: 1,
            label: '一级 1',
            children: [{
                id: 4,
                label: '二级 1-1',
                children: [{
                    id: 9,
                    label: '三级 1-1-1'
                }, {
                    id: 10,
                    label: '三级 1-1-2'
                }]
            }]
        }, {
            id: 2,
            label: '一级 2',
            children: [{
                id: 5,
                label: '二级 2-1'
            }, {
                id: 6,
                label: '二级 2-2'
            }]
        }, {
            id: 3,
            label: '一级 3',
            children: [{
                id: 7,
                label: '二级 3-1'
            }, {
                id: 8,
                label: '二级 3-2'
            }]
        }],
    }
  },
  methods:{
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleChange(value) {
      console.log(value);
    },
    handleNodeClickTestingUnit(data){

        let datalist = this.$refs.treeTestingUnit.getCheckedNodes()
        let idsList = this.$refs.treeTestingUnit.getCheckedKeys()

        datalist.forEach((item) => {
            this.value1.push(item.title)
        })
        console.log("datalist:",datalist,"idsList:",idsList)
    },
    handleTestSelectVal(){
      console.log("handleTestSelectVal:",this.testSelectVal)
    }
  }
}
</script>

<style>
.example-title{padding: 30px 0 20px;font-size: 24px}
.emp-select.el-select .el-input__inner{border: 1px solid #606266}
.emp-select.el-select .el-input__inner,.emp-datetime.el-input .el-input__inner{height: 32px;line-height: 32px;}
.emp-select.el-select .el-input__icon,.emp-datetime.el-input .el-input__icon{line-height: 32px}
.emp-select.el-select .el-input.is-disabled .el-input__inner{border: 1px solid #E4E7ED}
.emp-select.el-select .el-tag.el-tag--info{border: none}
.epm-inputnumber.el-input-number{width: 150px;line-height: 30px}
.epm-inputnumber.el-input-number .el-input__inner{height: 32px;line-height: 32px}
</style>
